<template>
  <div class="page p-3">
    <div class="page-item-container p-3 bg-white rounded shadow-sm flex flex-col justify-center h-full">
      <div class="login-panel w-full max-w-md mx-auto">
        <span class="info text-center mb-4">登录以访问更多信息</span>
        <form @submit.prevent="handleClickSubmit">
          <div class="mb-4">
            <label class="block text-gray-700 text-sm font-bold mb-2" for="username">
              用户名
            </label>
            <input 
              class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
              id="username" 
              type="text" 
              v-model="formValue.username"
            > <!--↑↑↑[管理员登录]下 用户名输入框样式
            “shadow 阴影样式” “border 边框样式” “rounded 边框圆角” “w-full 宽度占满” “py-2 px-3 文本边距为12px” “text-gray-700 文本颜色为灰色” “leading-tight 行高为tight” “focus:outline-none 鼠标悬停时无边框” “focus:shadow-outline 鼠标悬停时 ”-->
          </div>
          <div class="mb-6">
            <label class="block text-gray-700 text-sm font-bold mb-2" for="password">
              密码
            </label>
            <input 
              class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 mb-3 leading-tight focus:outline-none focus:shadow-outline"
              id="password" 
              type="password" 
              v-model="formValue.password"
            > <!--↑↑↑[管理员登录]下 密码输入框
            “mb-3 底部边距为12px”-->
          </div>
          <div class="flex items-center justify-between">
            <button 
              class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
              type="submit"
            > <!--↑↑↑[管理员登录]下 登录按钮
            “bg-blue-500 背景色为蓝色 鼠标悬停时背景色为深蓝色 边框为白色 边框样式为实线 边框宽度为2px 边框圆角为4px 边距为12px 文本颜色为白色 行高为tight” -->
            </button>
            <button 
              class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
              type="button"
              @click="handleClickLogout"
            > <!--↑↑↑[管理员登录]下 退出登录按钮-->
              退出登录
            </button>
            <button 
              class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
              type="button"
              @click="handleClickRegister"
            > <!--↑↑↑[管理员登录]下 注册按钮-->
              没有账号？点击交易
            </button>
          </div>
        </form>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ElMessage } from "element-plus";
import { ref } from "vue";
import { useRouter } from "vue-router";
import request from "../../request";
const formValue = ref({
  username: "",
  password: "",
});
const router = useRouter();
//登陆
const handleClickSubmit = async (e: any) => {
  let param = formValue.value;
  request
    .post("/accountsManage/login", param)
    .then((res) => {
      const message = res["message"] || "";
      ElMessage.success({
        message: message,
      });

      // 登录成功后跳转到首页
      router.push("/");
    })
    .catch((err) => {
      const res = err.response || {};
      const resData = res.data || {};
      const resDataMessage = resData.message || "";
      ElMessage.error({
        message: resDataMessage,
      });
    });

  // if (result.data) {
  //   ElMessage.success("登陆成功");
  //   let token = result.data;
  //   localStorage.setItem("token", token);
  //   window.location.href = "/categoryTable";
  // } else {
  //   ElMessage.error("登录失败，可能是用户名和密码不正确");
  // }
};
// 退出登录
const handleClickLogout = async (e: any) => {
  // let token = localStorage.getItem("token");
  // if (token) {
  //   localStorage.removeItem("token");
  //   ElMessage.success("退出登录成功");
  // }else{
  //   ElMessage.error("还未登陆");
  // }
};
//没有账号？点击交易 -Lin
const handleClickRegister = async (e: any) => {
  ElMessage.error("暂时无法交易");
};
</script>
<style lang="css" scoped>
.page {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  background-color: #f5f6f7;
}
.page-item-container {
  box-sizing: border-box;
  border-radius: var(--el-border-radius-base);
  background-color: #fff;
  box-shadow: 0 1px 3px rgb(26 26 26 / 10%);
}
.padding-12 {
  padding: 12px;
}
.page-item-login {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  box-sizing: border-box;
  padding-bottom: 150px;
}

.page-item-login .info {
  display: block;
  width: 100%;
  line-height: 84px;
  text-align: center;
}
.page-item-login .login-panel {
  width: 70%;
  display: block;
  margin: 0 auto;
}
</style>
